<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>city</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css" />
    <link rel="stylesheet" href="https://qiaonan.info:8123/favicon.ico">
    <!-- jq -->
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
        body {
            scroll-behavior: smooth;
            margin: 0;
            padding: 0;
        }

        .hot-city,
        .select,
        .cityList {
            margin: 20px;
            scroll-behavior: smooth;
            position: sticky;
        }

        .city-list {
            cursor: pointer;
        }

        span {
            margin-right: 10px;
        }

        .cityList {
            display: flex;
            padding: 10px;
        }

        .cityList:hover {
            background: #e5e5e5;
            border-radius: 30px;
        }

        .cityList>span:first-child {
            box-sizing: border-box;
            vertical-align: top;
            padding-top: 10px;
            display: inline-block;
            text-align: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: #222222;
            background: #ffd000;
        }

        .cityList>div {
            display: inline-block;
            width: calc(100% - 60px);
        }

        #app {
            scroll-behavior: smooth;
        }

        .search {
            margin: 20px;
            display: flex;
            flex-wrap: wrap;
            top: 320px;

        }

        .search>div {
            margin: 10px;
            margin-left: 0;
        }

        .search>div .el-select {
            margin: 5px;
        }

        .bm-view {
            width: 100%;
            height: 40vh;
            top: 0;
            z-index: 3;
        }

        .bm-view .anchorBL {
            display: none;
        }

        .head-box {
            background: #fff;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 66;
        }

        .body {
            margin-top: calc(224px);
            height: calc(100vh - 244px);
            overflow: auto;
        }
        .location {
            margin-top: 10px;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <script>
        // VConsole 默认会挂载到 `window.VConsole` 上
        // var vConsole = new window.VConsole();
    </script>
    <script src="https://qiaonan.info:8123/city/A_ZCITY.js"></script>
    <script src="https://qiaonan.info:8123/city/province.js"></script>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>
    <!-- 百度地图 -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=McNb5piG3hhs7F4F2OnohUMpyzTG1iQ6"></script>
    <script src="https://unpkg.com/vue-baidu-map"></script>
    <div id="app">

        <div class="head-box">
            <!-- <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="getLocation">
                <bm-scale anchor="BMAP_ANCHOR_TOP_LEFT"></bm-scale>
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" @locationSuccess="getLct" @locationError="lctError" :show-address-bar="true" :auto-location="true"></bm-geolocation>
            </baidu-map> -->
            <div class="location">
                <i class="el-icon-location"></i>
                <span>当前城市：{{curPostion}}</span>
            </div>
            <div class="search">
                <div>
                    <span>按省份选择：</span>
                    <el-select v-model="provinceName" placeholder="请选择省份" clearable>
                        <el-option v-for="(item,index) in provinceList" :key="'itemprovince'+index" :label="index" :value="index">
                        </el-option>
                    </el-select>

                    <el-select v-model="provinceNameCity" placeholder="请选择城市" clearable>
                        <el-option v-for="item in provinceList[provinceName]" :key="'provinceNameCity'+item.id" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>

                </div>
                <div>
                    <span>请搜索城市：</span>
                    <el-select v-model="searchName" filterable placeholder="请选择城市" clearable>
                        <!-- <el-option v-for="item in options" :key="item" :label="item" :value="item">
                            </el-option> -->
                        <el-option-group v-for="(group,index) in selectOpts" :key="'group'+index" :label="group.label">
                            <el-option v-for="(item,index) in group.city" :key="'item'+index" :label="item" :value="item">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </div>
            </div>
            <div class="hot-city">
                <span class="title">热门城市：</span>
                <span style="cursor:pointer;" @click="selectcity(item)" class="city-list" v-for="(item,index) in hotCity" :key="'hotCity'+index">
                    {{item}}
                </span>
            </div>
            <div class="select">
                <span>按拼音首字母选择：</span>
                <div style="display: flex; flex-wrap: wrap;">
                    <span class="city-list" v-for="(item,index) in applet" :key="'applet'+index">
                        <a :href="'#'+item">{{item}}</a>
                    </span>
                </div>
            </div>
        </div>

        <div class="body">
            <div class="cityList" v-for="(item,index) in city" :key="'city'+index">
                <span :id="index">{{ index}}</span>
                <div>
                    <span style="cursor:pointer;" v-for="(ele,idx) in item" :key="'itemlist'+idx" @click="selectcity(ele)"> {{ele}} </span>
                </div>
            </div>
        </div>

    </div>
    <script>
        Vue.use(VueBaiduMap.default, {
            ak: 'McNb5piG3hhs7F4F2OnohUMpyzTG1iQ6'
        })
    </script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    city: [],
                    searchName: "",
                    applet: [],
                    hotCity: [],
                    provinceNameList: [],
                    provinceNameCity: '北京',
                    provinceName: '北京',
                    provinceList: {},
                    center: { lng: 0, lat: 0 },
                    zoom: 0,
                    curPostion:'',
                };
            },

            watch: {
                searchName(val) {
                    if (!val) return;
                    this.selectcity(val);
                },

                provinceName(val) {
                    this.provinceNameCity = '';
                },

                provinceNameCity(val) {
                    if (!val) return;
                    this.selectcity(val);
                }
            },

            computed: {},

            created() {
                this.setA_ZCity();
                this.setProvince();

            },

            mounted() {
                let geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition( (r) =>{
                    let province = r.address.province;
                    let district  = r.address.district;
                    let country  = r.address.country;
                    let street  = r.address.street;
                    let street_number  = r.address.street_number;
                    this.curPostion = province + district + country;
                });
            },

            methods: {
                setA_ZCity() {
                    this.hotCity = A_Z_CITY["热门城市"];
                    delete A_Z_CITY["热门城市"];
                    this.city = A_Z_CITY;
                    this.applet = Object.keys(this.city);
                    this.selectOpts = [
                        {
                            label: "热门城市",
                            city: this.hotCity
                        },
                        {
                            label: "其它城市",
                            city: Object.values(this.city).flat(1)
                        }
                    ]
                },

                setProvince() {
                    // console.log(provinceList)
                    this.provinceList = {},
                        provinceList.forEach((item) => {
                            this.provinceList[item.provinceName] = item.cityInfoList;
                        })
                },

                selectcity(city) {
                    this.center = city;
                    this.findProvinceName(city);
                },

                // 从城市找省名
                findProvinceName(city) {
                    if (this.provinceNameCity == city) return
                    for (let i in this.provinceList) {
                        let arr = this.provinceList[i].map(item => item.name)
                        if (arr.includes(city)) {
                            this.provinceName = i;
                            break;
                        }
                    }
                    // 异步更新
                    this.$nextTick(() => {
                        this.provinceNameCity = city;

                        this.curPostion = this.provinceName + city;
                    })

                },

                // 初始化
                getLocation() {
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(showPosition.bind(this), errorHandel.bind(this));
                    } else {
                        alert("Geolocation is not supported by this browser.");
                    }

                    function showPosition({ coords }) {
                        console.log(coords, 'position', this)
                        this.center = {
                            lat: coords.latitude,
                            lng: coords.longitude
                        }
                        this.zoom = 13;
                        console.log(this.center)
                    }

                    function errorHandel(err) {
                        this.center = "北京";
                        this.zoom = 10;
                        // alert("你的浏览器不支持定位请换一个浏览器试试", err)
                    }

                },

                // 百度地图定位失败
                lctError(err) {
                    alert("定位失败，请稍后再试" + err)
                },
                // 百度地图定位成功
                getLct(location) {
                    console.log(1111, arguments);
                    console.log(location)
                },
            }
        });
    </script>
</body>

</html>